<template>
  <div class="supplement">
    <navBar title="补充订单信息" @onClickLeft="onClickLeft" />
    <div class="supplement-form">
      <van-form validate-first>
        <van-field
          name="file"
          label="服务文件"
          :rules="[{ required: true, message: '请选择服务文件' }]"
          class="van-field-isRequired"
        >
          <template #input>
            <van-uploader
              upload-icon="todo-list-o"
              v-model="fileList"
              :before-read="beforeRead"
              :after-read="afterRead"
              :multiple="true"
              :max-count="5"
            />
          </template>
        </van-field>
        <van-field name="file" label="发票文件" class="needTips">
          <!-- accept=".zip, .rar, aplication/zip" -->
          <template #input>
            <van-uploader
              upload-icon="todo-list-o"
              v-model="invFirstList"
              :before-read="invBeforeRead"
              :after-read="invAfterRead"
              :max-count="1"
            />
            <p class="tips">如需修改发票文件请提交，提交后将会替换订单中的发票文件。无需修改请勿提交！</p>
          </template>
        </van-field>
      </van-form>
    </div>
    <div class="supplement-btn">
      <van-button round block type="info" native-type="submit" @click="onSubmit">提交</van-button>
    </div>
  </div>
</template>

<script>
import navBar from "@cb/navBar.vue";
import { orderSupplement } from "@a/order.js";
import axios from "axios";
import { Dialog, Toast } from "vant";
export default {
  components: {
    navBar,
  },
  data() {
    return {
      form: {},
      fileList: [],
      invFirstList: [],
      params: new FormData(),
      order_id: null,
      fileIndex: 1,
    };
  },
  deactivated() {
    this.$destroy(true); //销毁组件
  },
  watch: {},
  created() {
    this.order_id = this.$route.query && this.$route.query.order_id;
  },
  methods: {
    beforeRead(file) {
      // if (
      //   !["zip", "rar", "x-zip-compressed"].includes(file.type.split("/")[1])
      // ) {
      //   Dialog.alert({
      //     title: "提示",
      //     message: "请上传zip/rar压缩文件",
      //   });
      //   return false;
      // }
      return true;
    },
    afterRead(file) {
      if (file.length) {
        file.forEach((item, index) => {
          if (index) {
            this.fileIndex++;
          }
          this.params.append(`service_file${this.fileIndex}`, item.file);
        });
        this.fileIndex++;
      } else {
        this.params.append(`service_file${this.fileIndex}`, file.file);
        this.fileIndex++;
      }
    },
    invBeforeRead(file) {
      return true;
    },
    invAfterRead(file) {
      this.params.append(`invoice_file`, file.file);
    },
    submitPost() {
      this.params.append("order_id", this.order_id);

      orderSupplement(this.params).then((res) => {
        if (res.code === 200) {
          Toast.success("订单补充成功！");
          this.$router.push({
            path: `/user/home/details/${this.order_id}`,
            params: {
              id: this.order_id,
            },
          });
        }
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onSubmit() {
      if (!this.fileList.length) {
        this.$message.error("请先上传文件");
        return;
      }
      this.submitPost();
    },
  },
};
</script>

<style lang='less'>
.supplement {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  &-form {
    margin-top: 20px;
    .van-cell {
      margin-bottom: 15px;
    }
    .needTips {
      .van-field__body {
        .van-field__control {
          flex-direction: column;
          align-items: flex-start;
        }
      }
      .tips {
        color: #ccc;
      }
    }
  }
  .van-submit-bar {
    bottom: 20px;
  }
  &-btn {
    width: 100%;
    box-sizing: border-box;
    padding: 0 15px;
    position: fixed;
    bottom: 20px;
  }
}
</style>